<<<<<<< HEAD
<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup('event')" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <!-- <input type="button" name="bt" id="button2" value="确认2" /> -->
        </div>
        <div id="todogroup">
            <!-- <div id="todo0">
                <input type="checkbox" name="todocheck" />吃饭<button type="button(0)" onclick="deleteByIndex(0)">
                    删除
                </button>
            </div>
            <div id="todo2">
                <input type="checkbox" name="todocheck" />睡觉<button type="button(2)" onclick="deleteByIndex(2)">
                    删除
                </button>
            </div> -->
        </div>
        <!-- <div  id ='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            <div style="opacity: 0">1111111</div>
            <div>2222222</div>
            <div>3333333</div>
        </div>  -->
    </div>
</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {
        document.getElementById("button2").onclick = handleClick;
    }

    function keyup(e) {
        console.log(e);
        if (e.keyCode == 13)
            handleClick();
    }

    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        var temp = getValue();

        // document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
        var div = document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").append(div);

        //document.getElementById("todo" + i).remove();
        document.getElementById("todogroup").innerHTML += " <div class='item' id='todo"
        + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
        + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
        // document.getElementsByClassName("main")[0].style = "background-color:#333333;";
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#3e3e3e';
    }

    function leave(id) {
        document.getElementById(id).style = 'background-color:#ffffff';
    }
    init();

</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 500vh;
    }

    .main {
       padding :12px;
       border: 1px solid #333333;
       border-radius: 8px;
    }

    .row {
        display: flex;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 10px;
        padding: 3px;

    }

    .item:hover{
        background-color: #ffffff;
                transform:scale(1.1);
    }
    .item-value{
        flex-grow: 1;
        color:black;
    }
    .item-del{
        color:white;
        background-color: red;
        border-radius: 5px;
        border:0px;
        opacity: 0;

    }
    .item:hover .item-del{
        opacity: 1;
    }
    .input{
        padding: 8px;
        margin-right:10px ;
        outline: none;
        border: 2px solid #b1afaf;
    }
    .input:focus{
        box-shadow: 0px 0px 10px blue;
        border: 2px solid white;
    }

    
</style>

=======
<<<<<<< HEAD
<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup('event')" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <!-- <input type="button" name="bt" id="button2" value="确认2" /> -->
        </div>
        <div id="todogroup">
            <!-- <div id="todo0">
                <input type="checkbox" name="todocheck" />吃饭<button type="button(0)" onclick="deleteByIndex(0)">
                    删除
                </button>
            </div>
            <div id="todo2">
                <input type="checkbox" name="todocheck" />睡觉<button type="button(2)" onclick="deleteByIndex(2)">
                    删除
                </button>
            </div> -->
        </div>
        <!-- <div  id ='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            <div style="opacity: 0">1111111</div>
            <div>2222222</div>
            <div>3333333</div>
        </div>  -->
    </div>
</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {
        document.getElementById("button2").onclick = handleClick;
    }

    function keyup(e) {
        console.log(e);
        if (e.keyCode == 13)
            handleClick();
    }

    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        var temp = getValue();

        // document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
        var div = document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").append(div);

        //document.getElementById("todo" + i).remove();
        document.getElementById("todogroup").innerHTML += " <div class='item' id='todo"
        + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
        + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
        // document.getElementsByClassName("main")[0].style = "background-color:#333333;";
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#3e3e3e';
    }

    function leave(id) {
        document.getElementById(id).style = 'background-color:#ffffff';
    }
    init();

</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 500vh;
    }

    .main {
       padding :12px;
       border: 1px solid #333333;
       border-radius: 8px;
    }

    .row {
        display: flex;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 10px;
        padding: 3px;

    }

    .item:hover{
        background-color: #ffffff;
                transform:scale(1.1);
    }
    .item-value{
        flex-grow: 1;
        color:black;
    }
    .item-del{
        color:white;
        background-color: red;
        border-radius: 5px;
        border:0px;
        opacity: 0;

    }
    .item:hover .item-del{
        opacity: 1;
    }
    .input{
        padding: 8px;
        margin-right:10px ;
        outline: none;
        border: 2px solid #b1afaf;
    }
    .input:focus{
        box-shadow: 0px 0px 10px blue;
        border: 2px solid white;
    }

    
</style>

=======
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> d376503 (饶驿婷)
<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup('event')" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <!-- <input type="button" name="bt" id="button2" value="确认2" /> -->
        </div>
        <div id="todogroup">
            <!-- <div id="todo0">
                <input type="checkbox" name="todocheck" />吃饭<button type="button(0)" onclick="deleteByIndex(0)">
                    删除
                </button>
            </div>
            <div id="todo2">
                <input type="checkbox" name="todocheck" />睡觉<button type="button(2)" onclick="deleteByIndex(2)">
                    删除
                </button>
            </div> -->
        </div>
        <!-- <div  id ='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            <div style="opacity: 0">1111111</div>
            <div>2222222</div>
            <div>3333333</div>
        </div>  -->
    </div>
</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {
        document.getElementById("button2").onclick = handleClick;
    }

    function keyup(e) {
        console.log(e);
        if (e.keyCode == 13)
            handleClick();
    }

    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        var temp = getValue();

        // document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
        var div = document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").append(div);

        //document.getElementById("todo" + i).remove();
        document.getElementById("todogroup").innerHTML += " <div class='item' id='todo"
        + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
        + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
        // document.getElementsByClassName("main")[0].style = "background-color:#333333;";
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#3e3e3e';
    }

    function leave(id) {
        document.getElementById(id).style = 'background-color:#ffffff';
    }
    init();

</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 500vh;
    }

    .main {
       padding :12px;
       border: 1px solid #333333;
       border-radius: 8px;
    }

    .row {
        display: flex;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 10px;
        padding: 3px;

    }

    .item:hover{
        background-color: #ffffff;
                transform:scale(1.1);
    }
    .item-value{
        flex-grow: 1;
        color:black;
    }
    .item-del{
        color:white;
        background-color: red;
        border-radius: 5px;
        border:0px;
        opacity: 0;

    }
    .item:hover .item-del{
        opacity: 1;
    }
    .input{
        padding: 8px;
        margin-right:10px ;
        outline: none;
        border: 2px solid #b1afaf;
    }
    .input:focus{
        box-shadow: 0px 0px 10px blue;
        border: 2px solid white;
    }

    
</style>

<<<<<<< HEAD
=======
=======
<<<<<<< HEAD
<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup('event')" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <!-- <input type="button" name="bt" id="button2" value="确认2" /> -->
        </div>
        <div id="todogroup">
            <!-- <div id="todo0">
                <input type="checkbox" name="todocheck" />吃饭<button type="button(0)" onclick="deleteByIndex(0)">
                    删除
                </button>
            </div>
            <div id="todo2">
                <input type="checkbox" name="todocheck" />睡觉<button type="button(2)" onclick="deleteByIndex(2)">
                    删除
                </button>
            </div> -->
        </div>
        <!-- <div  id ='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            <div style="opacity: 0">1111111</div>
            <div>2222222</div>
            <div>3333333</div>
        </div>  -->
    </div>
</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {
        document.getElementById("button2").onclick = handleClick;
    }

    function keyup(e) {
        console.log(e);
        if (e.keyCode == 13)
            handleClick();
    }

    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        var temp = getValue();

        // document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
        var div = document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").append(div);

        //document.getElementById("todo" + i).remove();
        document.getElementById("todogroup").innerHTML += " <div class='item' id='todo"
        + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
        + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
        // document.getElementsByClassName("main")[0].style = "background-color:#333333;";
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#3e3e3e';
    }

    function leave(id) {
        document.getElementById(id).style = 'background-color:#ffffff';
    }
    init();

</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 500vh;
    }

    .main {
       padding :12px;
       border: 1px solid #333333;
       border-radius: 8px;
    }

    .row {
        display: flex;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 10px;
        padding: 3px;

    }

    .item:hover{
        background-color: #ffffff;
                transform:scale(1.1);
    }
    .item-value{
        flex-grow: 1;
        color:black;
    }
    .item-del{
        color:white;
        background-color: red;
        border-radius: 5px;
        border:0px;
        opacity: 0;

    }
    .item:hover .item-del{
        opacity: 1;
    }
    .input{
        padding: 8px;
        margin-right:10px ;
        outline: none;
        border: 2px solid #b1afaf;
    }
    .input:focus{
        box-shadow: 0px 0px 10px blue;
        border: 2px solid white;
    }

    
</style>

=======
<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup('event')" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <!-- <input type="button" name="bt" id="button2" value="确认2" /> -->
        </div>
        <div id="todogroup">
            <!-- <div id="todo0">
                <input type="checkbox" name="todocheck" />吃饭<button type="button(0)" onclick="deleteByIndex(0)">
                    删除
                </button>
            </div>
            <div id="todo2">
                <input type="checkbox" name="todocheck" />睡觉<button type="button(2)" onclick="deleteByIndex(2)">
                    删除
                </button>
            </div> -->
        </div>
        <!-- <div  id ='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            <div style="opacity: 0">1111111</div>
            <div>2222222</div>
            <div>3333333</div>
        </div>  -->
    </div>
</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {
        document.getElementById("button2").onclick = handleClick;
    }

    function keyup(e) {
        console.log(e);
        if (e.keyCode == 13)
            handleClick();
    }

    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        var temp = getValue();

        // document.getElementById("todogroup").innerHTML += "<div>" + temp + "</div>";
        var div = document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").append(div);

        //document.getElementById("todo" + i).remove();
        document.getElementById("todogroup").innerHTML += " <div class='item' id='todo"
        + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
        + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
        // document.getElementsByClassName("main")[0].style = "background-color:#333333;";
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id) {
        document.getElementById(id).style = 'background-color:#3e3e3e';
    }

    function leave(id) {
        document.getElementById(id).style = 'background-color:#ffffff';
    }
    init();

</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 500vh;
    }

    .main {
       padding :12px;
       border: 1px solid #333333;
       border-radius: 8px;
    }

    .row {
        display: flex;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 10px;
        padding: 3px;

    }

    .item:hover{
        background-color: #ffffff;
                transform:scale(1.1);
    }
    .item-value{
        flex-grow: 1;
        color:black;
    }
    .item-del{
        color:white;
        background-color: red;
        border-radius: 5px;
        border:0px;
        opacity: 0;

    }
    .item:hover .item-del{
        opacity: 1;
    }
    .input{
        padding: 8px;
        margin-right:10px ;
        outline: none;
        border: 2px solid #b1afaf;
    }
    .input:focus{
        box-shadow: 0px 0px 10px blue;
        border: 2px solid white;
    }

    
</style>

>>>>>>> 861c01f (饶驿婷)
>>>>>>> 4a7ce3a (饶驿婷)
>>>>>>> d376503 (饶驿婷)
>>>>>>> ceff70e (饶驿婷)
>>>>>>> f4551b3 (饶驿婷)
</html>